import React from 'react';
import { connect, mapProps, mapReadPretty } from '@formily/react';
import { Input as AntdInput } from 'antd';
import { InputProps, TextAreaProps } from 'antd/lib/input';
import { LoadingOutlined } from '@ant-design/icons';

// displayName 支持 name, useCode 两种模式 默认为name
type ComposedInput = React.FC<InputProps> & {
  TextArea?: React.FC<TextAreaProps>;
};
const userInfo =
  JSON.parse(
    localStorage.getItem('currentUser') || (sessionStorage.getItem('currentUser') as any),
  ) || '';
export const BillInput: ComposedInput = connect(
  AntdInput,
  mapProps((props: any, field) => {
    const newProps =
      props.type === 'bill'
        ? {
            ...props,
            defaultValue: userInfo[props.display],
          }
        : props;
    return {
      ...newProps,
      suffix: (
        <span>
          {field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}
        </span>
      ),
    };
  }),
  mapReadPretty(({ value, _value }) => <div>{_value || value}</div>),
);
BillInput.TextArea = connect(
  AntdInput.TextArea,
  mapReadPretty(({ value, _value }) => <div>{_value || value}</div>),
);

export default BillInput;
